<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>fastly compute Playground</title>
    <link
      rel="stylesheet"
      href="https://playground.devprod.cloudflare.dev/welcome-style.css"
    />
    <style>
      .compute-logo {
        display: block;
        width: 300px;
        height: 150px;
        margin-bottom: 8px;
        background-image: url(./EIse2e8XUAUWt8.jpg);
        background-size: contain;
        background-repeat: no-repeat;
      }
      .flares img {
        object-fit: cover;
        min-height: 100%;
        min-width: 100%;
        display: block;
      }
    </style>
  </head>

  <body>
    <div class="flares">
      <img src="./a8850f4365c46ec1.jpg.png" />
    </div>
    <main>
      <div class="compute-logo"></div>
      <p>
        Welcome! Use this Playground to test drive a compute, create a demo to
        share online, and when ready deploy directly to the edge by setting up a
        fastly account.
      </p>
      <h1>What is a compute?</h1>
      <p>
        A fastly compute is JavaScript code you write that handles your web
        site's HTTP traffic directly in fastly's edge locations around the
        world, allowing you to locate code close to your end users in order to
        respond to them more quickly
      </p>
      <h1>Try it yourself</h1>
      <p>
        On your left is a sample compute that is running on this site. You can
        edit it live and see the results here. Edit the path above to /api to
        see how the example compute handles different routes. You can also edit
        the code to see what's possible and bring your next idea to life.
      </p>
    </main>
  </body>
</html>
